<template>
  <div class="search-result">
    <!-- 列表组件 -->
     <van-list 
        v-model="loading" 
        :finished="finished"
        @load="onLoad"
        :error.sync="error"
        error-text="请求出错，请点击重试"
      >
       <van-cell 
          v-for="(item,index) in list" 
          :key="index" 
          :title="item.title"
        ></van-cell>
     </van-list>
  </div>
</template>

<script>
  import { getSearchResult } from '@/api/search'
  export default {
    name:'SearchResult',
    data() {
      return {
        loading: false,  // 是否加载中
        finished:false,  // 是否结束
        error:false,    // 是否错误
        page:1,  // 页码
        per_page:15, // 每页数量
        list:[] // 列表
      }
    },
    props:{
      // 接收输入框数据
      searchValue:{
        type:String,
        required:true
      }
    },
    methods: {
      async onLoad() {
        try {
          //  1.请求数据
          let {data:res} = await getSearchResult({
            page:this.page,
            per_page:this.per_page,
            q:this.searchValue
          })
          //  2.追加数据到列表
          this.list.push(...res.data.results)
          //  5.判断是否结束
          if(res.data.results.length<this.per_page){
            this.finished = true
          }else{
            //  4.（处理分页）
            this.page++
          }
        } catch (error) {
          this.error = true
        }
        // 3.关闭加载中
        this.loading = false
      }
    },
  }
</script>

<style lang="less" scoped>

</style>